ひとりNavigation API Advent Calendar 21日目
https://gyazo.com/772a92134dc9821751f2aed6d57e69c0
これはひとりNavigation API Advent Calendarの21日目です。
Navigation APIがあればRoute Announcerの仕組みは不要になるのだろうか?ということを考えてみる
前提:Route Announcerとは何か
SPAの場合にスクリーンリーダーユーザーのためにページ遷移したことを伝えるテクニックのこと
詳しくは令和最新Route Announcer事情 | yamanoku Advent Calendar 2023をご覧ください
通常のHistory APIと違って「ページ読み込み」の状態を挟むため、この状態はスクリーンリーダーへ通知されるようになっている
現状Navigation APIのintercept()にはfocusResetという制御がある
詳しくは以下参照
ひとりNavigation API Advent Calendar 12日目
ひとりNavigation API Advent Calendar 17日目
デフォルトでbody、あるいはautofocus=""があるところへ遷移することができる
manualに設定することで独自でフォーカス位置を設定することができる
MPAの挙動に沿う形にはなるが、ページ遷移時のタイトルの変化などは結局しなければならないので処理としては必要になってしまいそう
結論としては要らなくなることはなさそう
Navigation APIではintercept()にてcommited時の判定時に処理をハンドラへ渡すことができる
このタイミングでRoute Announcerに通知するための情報を準備する
finishedの段階で改めて通知する形になりそう
code:js
// Route Announcerへ必要な情報を設定する
await navigation.navigate(url, state).finished;
// Route Announcerへの通知処理を入れる(内容の差し替え、タイトルの差し替えなど)
code:js
navigation.addEventListener("navigate", (event) => {
event.intercept({
async handler() {
// Route Announcerへ必要な情報を設定する
},
});
});
Navigation API制御になることで良くなると思ってること
JavaScriptの処理に依存しない形で制御できる
setTimeout(() => ({}), 1000)みたいな支援技術のために処理を一旦置いてから変更するようなこと
このへん ひとりNavigation API Advent Calendar 19日目#694601a4000000000038d173
本来はRoute Announcerへのタイトルの置き換えや要素の置き換えを即時で対応すればいいが、支援技術側にすぐ通知ができないこともあったりする
この時間をどれくらい置けばいいかは正直定まってなくそれっぽい数値で指定しておく必要がある
なのでナビゲーションの変更や完了という通知を見ておくることができるのであればこうしたマジックナンバーでの遅延処理はやらなくて済むはず
失敗した場合とかのフォールバックも管理できそう
フォーカス制御やスクロール制御も同時に設定することができる
これまではそれぞれ独立した処理になっていたがintecept経由で行うことでそれぞれまとめて対応することができるようになる
たとえばフォーカス制御で特定の位置に移動したのちにRoute Announcerへの通知、などができるはず